<!DOCTYPE HTML>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>我的订单</title>
    <link href="http://localhost:8080/hotle/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://localhost:8080/hotle/js/jquery-1.11.0.min.js"></script>
    <!-- Custom Theme files -->
    <link href="http://localhost:8080/hotle/css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="Mr Hotel Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--Google Fonts-->
    <link href='//fonts.googleapis.com/css?family=Hind:400,300' rel='stylesheet' type='text/css'>
    <link href='//fonts.googleapis.com/css?family=Aladin' rel='stylesheet' type='text/css'>
    <!--google fonts-->
    <!-- animated-css -->
    <link href="http://localhost:8080/hotle/css/animate.css" rel="stylesheet" type="text/css" media="all">
    <script src="http://localhost:8080/hotle/js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
    <!-- animated-css -->
    <script src="http://localhost:8080/hotle/js/bootstrap.min.js"></script>
</head>
<body onload="load();">
<!--header-top start here-->
<!--<div class="top-header">-->
<!--<div class="container">-->
<!--<div class="top-header-main">-->
<!--<div class="col-md-4 top-social wow bounceInLeft" data-wow-delay="0.3s">-->
<!--<ul>-->
<!--<li><h5>Follow Us :</h5></li>-->
<!--<li><a href="#"><span class="fb"> </span></a></li>-->
<!--<li><a href="#"><span class="tw"> </span></a></li>-->
<!--<li><a href="#"><span class="in"> </span></a></li>-->
<!--<li><a href="#"><span class="gmail"> </span></a></li>-->
<!--</ul>-->
<!--</div>-->
<!--<div class="col-md-8 header-address wow bounceInRight" data-wow-delay="0.3s">-->
<!--<ul>-->
<!--<li><span class="phone"> </span> <h6>(220) 280-31589</h6></li>-->
<!--<li><span class="email"> </span><h6><a href="mailto:info@example.com">Youremail@gmail.com</a></h6>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--<div class="clearfix"></div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--header-top end here-->
<!--header start here-->
<!-- NAVBAR
    ================================================== -->
<div class="header">
    <div class="fixed-header">

        <div class="navbar-wrapper">
            <div class="container">
                <nav class="navbar navbar-inverse navbar-static-top">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                                data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div class="logo wow slideInLeft" data-wow-delay="0.3s">
                            <a class="navbar-brand" href="HotleMain.html"><img
                                    src="http://localhost:8080/hotle/images/logo.png"/></a>
                        </div>
                    </div>
                    <div id="navbar" class="navbar-collapse collapse">
                        <nav class="cl-effect-16" id="cl-effect-16">
                            <ul class="nav navbar-nav">
                                <li><a href="HotleMain.html" data-hover="首页">首页</a></li>
                                <li><a th:href="@{/users/findHotleToReception}" data-hover="酒店预订">酒店预订</a></li>
                                <!--<li><a href="HotleSelected.html" data-hover="精选酒店">精选酒店</a></li>-->
                                <!--<li><a href="room.html" data-hover="Rooms">Rooms</a></li>-->
                                <li><a class="active" th:href="@{/users/findOrderByUser}" data-hover="我的订单">我的订单</a>
                                </li>
                                <li><a th:href="@{/users/UserCount}" data-hover="帐号管理">帐号管理</a></li>
                            </ul>
                        </nav>

                    </div>
                    <div class="clearfix"></div>
                </nav>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<!--header end here-->
<!--short codes start here-->
<div class="typrography">
    <div class="container">
        <div class="page">
            <h3 class="typo1 wow fadeInDownBig" data-wow-delay="0.3s">我的订单</h3>
            <!--button-->
            <div class="grid_3 grid_4">
                <div class="page-header">
                    <h3>订单信息</h3>
                </div>

                <div class="bs-example">
                    <table class="table">
                        <tbody>
                        <!--<tr>-->
                        <!--<td><h1 id="h1-bootstrap-heading">h1. Bootstrap heading<a class="anchorjs-link"-->
                        <!--href="#h1.-bootstrap-heading"><span-->
                        <!--class="anchorjs-icon"></span></a></h1></td>-->
                        <!--<td class="type-info">Semibold 36px</td>-->
                        <!--</tr>-->
                        <tr>
                            <td>酒店名</td>
                            <th class="type-info" >房型</th>
                            <th class="type-info" >入住时间</th>
                            <th class="type-info" >离店时间</th>
                            <th class="type-info" >金额</th>
                            <th class="type-info" >联系方式</th>
                            <th class="type-info" >订单状态</th>
                        </tr>
                        <tr th:each="list:${list}">
                        </tr>
                        <tr th:each="list:${list}">
                            <td th:text="${list.hotlename}">酒店名</td>
                            <td class="type-info" th:text="${list.roomType}" h>房型</td>
                            <td class="type-info" th:text="${list.liveIn}" th:id="'OrderTime'+${list.orderId}">
                                入住时间</td>
                            <td class="type-info" th:text="${list.liveOut}">离店时间</td>
                            <td class="type-info" th:text="${list.roomPrice}">金额</td>
                            <td class="type-info" th:text="${list.phone}">联系方式</td>
                            <td class="type-info" >
                                <span id="tim" th:text="${list.orderId}" style="display: none"/>
                                <a class="anchorjs-link" href="/users/deleteOrder" th:id="'cancleOrder'+${list.orderId}"  style="display: none"><span
                                    class="anchorjs-icon">取消订单</span></a>
                                <span class="anchorjs-icon" th:id="'finishOrder'+${list.orderId}" >订单已完成</span>
                            </td>
                            <!--<input value="uu" type="button" onclick="timer()"/>-->
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>
<script>
    window.onload = function(){
        // alert(new Date(document.getElementById('datepicker1').value));
            var id=document.getElementById("tim").innerHTML;
            var ts = new Date(document.getElementById('OrderTime'+id).innerHTML)
            // var ts = (new Date(2014, 9, 1, 0, 0, 0)) - (new Date());//计算bai剩余du的毫秒数      
            // alert(ts);
            var time1=ts .toLocaleDateString();
            // alert(time1);
            var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数      
            // var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数      
            // var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数      
            // var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数      
            dd = checkTime(dd);
            var date = new Date();
            var time=date .toLocaleDateString(); //获取当前日期
            // alert(time);
            // alert(ts.toLocaleDateString());
            // alert(time);
            if(time>time1){
                document.getElementById("finishOrder"+id).style.display="inline-block";
                document.getElementById("cancleOrder"+id).style.display="none";
            }else{
                document.getElementById("cancleOrder"+id).style.display="inline-block";
                document.getElementById("finishOrder"+id).style.display="none";
            }


    }
    function checkTime(i) {
        if (i < 10) {
            i = "0" + i;
        }
        return i;
    }
</script>
</body>
</html>